<!--发起新私信弹窗-->
<script setup>

import GlobalDialog from "@/components/common/dialog/GlobalDialog.vue";
import {ref} from "vue";
import PostTextArea from "@/components/post/PostTextArea.vue";
import {useStore} from "vuex";
import {ElementUtils} from "@/assets/js/ElementUtils";
import {routeNames} from "@/router";
import {Edit} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";

const store = useStore();


// 弹窗名称
const name = 'pm_new'
const closeDialog = () => store.commit("Dialog/closeDialog", name)

const pmNew = (title, content, userIds) => {
  const loading = ElementUtils.loading({target: "#pm_new_form",});
  return store.dispatch("Message/pmNew", {title, content, userIds})
      .then(res => {
        ElementUtils.notice({message: res})
        closeDialog();
        //跳转到私信列表
        router.push({name: routeNames.message.list})
      })
      .catch(ElementUtils.exceptionHandler)
      .finally(() => {
        loading.close()
      });
}
//修改邀请的用户
const editUserIds = () => {
  ElMessageBox.prompt("请填写用户ID，多个用逗号隔开", "邀请用户", {
    inputValue: userIds.value.join(','),
    inputValidator: (value) => {
      if (/^(\d+[，,]*)+$/.exec(value)) {
        return true;
      }
      return '格式不合法'
    }
  }).then(({value}) => {
    value = value.replace(/，/g, ',')
    userIds.value = value.split(',').map(i => Number(i))
  }).catch(r => console.log(r))
}

// 回复私信 - 标题
const title = ref();
const content = ref();
const userIds = ref();

const onOpen = (e) => {
  userIds.value = e
  title.value = undefined
  content.value = undefined
}

</script>

<template>
  <global-dialog :name="name" destroy-on-close @open="onOpen">
    <template #default="{data}">
      <div id="pm_new_form">
        <!--  编辑用户列表       -->
        <div>
          <el-button :icon="Edit" size="small" type="primary" @click="editUserIds">邀请用户</el-button>
          :
          <el-tag v-for="userId in userIds">{{ userId }}</el-tag>
        </div>
        <el-input v-model="title" placeholder="标题(至少6个字符)"/>
        <!--正文文本框-->
        <div style="text-align: left">
          <post-text-area ref="editor" v-model="content"/>
        </div>
        <el-button size="small" type="success" @click="pmNew(title, content, userIds)">提交</el-button>
      </div>
    </template>
    <template #header="{data}">
      发起私信
    </template>
  </global-dialog>
</template>

<style scoped>

</style>